<template>
  <div class="wrap">
    <nav-bar :title="cateTitle">
      <!-- <img src="/img/47.png" slot="screen" class="nav-right" /> -->
    </nav-bar>
    <div class="privateGoods">
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-list
                :finished="finished"
                finished-text="没有更多了"
                @load="getGoods"
            >
                <product-item-long class="goodsItem" slot="tabItem" v-for="(vo, index) in list" :key="'pro_'+index" :product="vo" :isOldVip="true" v-model="productValue[vo.goods_id]"></product-item-long>
            </van-list>
        </van-pull-refresh>
    </div>
    <div class="btnarea">
      <van-submit-bar
        button-text="立即领取"
        @submit="onSubmit"
      >
        <span slot="tip" v-if="address">
          当前收货地址:{{address.address}} <router-link to="/myAddressManagement?from=privateGoods">修改地址</router-link>
        </span>
        <span slot="tip" v-else>          
          尚未添加收货地址， <router-link to="/myAddressManagement?from=privateGoods">修改地址</router-link>
        </span>
        <div class="van-submit-bar__text">
          <span>合计：</span><span class="van-submit-bar__price"> &nbsp; {{totalWeight}}斤</span>
        </div>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import sideMenu from "@/components/side-menu";
import tabs from "@/components/tabs";
import productItemLong from "@/components/product-item-long";
import { List, PullRefresh } from "vant";
Vue.use(List).use(PullRefresh);
import { SubmitBar } from 'vant';
Vue.use(SubmitBar);
export default {
  name: "privateGoods",
  data() {
    return {
      productValue:{},
      cateTitle: "专属商品",
      loading: false,
      list: [],
      page: {
        nowPage: 0
      },
    };
  },
  mounted(){
    // this.getList()
  },
  computed: {
    finished(){
        if(this.page.totalPages && this.page.totalPages <= this.page.nowPage) {
            return true
        }
        return false
    }
  },
  watch:{
  },
  methods: {
    getGoods(){
      this.loading = true
      this.$store.dispatch('goodsListForFVipPrivate', {
        p: this.page.nowPage + 1
      }).then(res => {
        this.list = this.list.concat(res.data.result.goods_list)
        this.page = res.data.result.page
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    onRefresh(){
        this.list = []
        this.page = {
            nowPage: 0
        }
        this.getGoods()
    },
    onSubmit(){
      if(this.getDrawGoods.length == 0) return this.$toast('请选择要领取的商品')
      this.$store.dispatch('drawGoods', {
        goods: this.getDrawGoods
      }).then(res => {
        this.getGoods()
      }).catch(e => {

      })
    }
  },
  computed:{
    address(){
      return this.$store.state.selected_address || undefined
    },
    address_id(){
      return this.address ? this.address.address_id : 0
    },
    totalWeight(){
      return (this.totalWeight_g/500).toFixed(2)
    },
    totalWeight_g(){
      let we = 0
      for (const key in this.productValue) {
        if (this.productValue.hasOwnProperty(key)) {
          const num = this.productValue[key];
          const weight = this.goodsListObj[key] ? this.goodsListObj[key].weight : 0
          we += num * weight
        }
      }
      return we
    },
    getDrawGoods(){
      let goods = []
      for (const key in this.productValue) {
        if (this.productValue.hasOwnProperty(key)) {
          const num = this.productValue[key];
          if(num > 0) {
            goods.push({
              goods_id: key,
              goods_num: num
            })
          }
        }
      }
      return goods
    }
  },
  components: {
    navBar,
    sideMenu,
    tabs,
    productItemLong
  }
};
</script>
<style lang="less" scope>
.wrap {
  height: 100%;
  width: 100%;
  .btnarea{
    position: fixed;
    width: 100%;
    height: 60px;
    bottom: 0;
    background: #FFF;
    // .van-button{
    //   width: 200px;
    //   height: 40px;
    //   margin: 10px auto;
    //   left: 50%;
    //   margin-left: -100px;
    // }
    .van-submit-bar__text{
      text-align: left;
      padding-left: 20px;
    }
    .van-submit-bar__price{
      font-size: unset;
    }
    // #012f40
    .van-button--danger {
      color: #fff;
      background-color: #012f40;
      border: 0.026667rem solid #012f40;
    }
  }
}
.nav-right {
  height: 20px;
  width: 20px;
}
.privateGoods {
  display: flex;
  width: 100%;
  height: 100%;
  padding-top: 50px;
  box-sizing: border-box;
  width: 345px;
  margin: 0 auto;
  .van-pull-refresh{
      width: 100%;
  }
  .tabs {
    width: 100%;
    height: 45px;
    background-color: #fff;
    .goodsItem{
      width: 270px;
    }
    .van-tabs__line {
      background-color: #fff;
    }

    .van-tab {
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 48, 48, 1);
      &.van-tab--active {
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(0, 124, 157, 1);
      }
    }
  }
}
</style>


